```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EmbedPDF - 现代网页PDF查看解决方案</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            background: #1e293b;
            border-radius: 8px;
            color: #e2e8f0;
        }
        .divider {
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #4f46e5, #7c3aed);
            margin: 2rem auto;
            border-radius: 2px;
        }
        .mermaid {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="max-w-6xl mx-auto text-center">
            <div class="inline-block px-3 py-1 bg-white bg-opacity-20 rounded-full mb-4">
                <span class="text-sm font-medium">开源项目 · MIT许可证</span>
            </div>
            <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight font-serif">EmbedPDF</h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 opacity-90">
                现代化的JavaScript PDF查看器，为您的网页带来卓越的阅读体验
            </p>
            <div class="flex justify-center space-x-4">
                <a href="#try-it" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-300 shadow-lg">
                    立即体验
                </a>
                <a href="https://github.com/embedpdf/embed-pdf-viewer" target="_blank" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-300">
                    <i class="fab fa-github mr-2"></i> GitHub
                </a>
            </div>
            <div class="mt-16">
                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1755407599230-6d2796a5-d10b-4580-a659-37075c232f42.png" alt="EmbedPDF界面截图" class="rounded-xl shadow-2xl max-w-full mx-auto border-8 border-white border-opacity-20">
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-20 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">它能解决什么问题</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    在Web应用中嵌入PDF查看功能时，开发者常面临诸多挑战。EmbedPDF正是为解决这些问题而设计。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-slate-50 p-8 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                            <i class="fas fa-exclamation-triangle text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">现有解决方案的痛点</h3>
                    </div>
                    <ul class="space-y-3 text-slate-700">
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-400 mt-1 mr-2"></i>
                            <span>与特定框架绑定，难以跨框架使用</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-400 mt-1 mr-2"></i>
                            <span>功能简单缺乏交互性，或体积庞大加载缓慢</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-400 mt-1 mr-2"></i>
                            <span>自定义UI或功能需要大量修改</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-400 mt-1 mr-2"></i>
                            <span>商业解决方案价格高昂，存在供应商锁定风险</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-indigo-50 p-8 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-600 p-3 rounded-full mr-4">
                            <i class="fas fa-lightbulb text-white text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">EmbedPDF的解决方案</h3>
                    </div>
                    <ul class="space-y-3 text-slate-700">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>轻量级、框架无关的架构</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>高性能PDF查看体验</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>高度可定制性</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>开源免费，无供应商锁定</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 px-4 bg-slate-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">核心功能概述</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    EmbedPDF提供5个核心功能，满足多样化的PDF查看需求
                </p>
                <div class="divider"></div>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4 text-3xl">
                        <i class="fas fa-scroll"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">平滑虚拟化滚动</h3>
                    <p class="text-slate-600">
                        通过虚拟化技术，即使处理大型PDF文档也能实现快速、流畅的滚动体验。
                    </p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4 text-3xl">
                        <i class="fas fa-search-plus"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">交互式工具</h3>
                    <p class="text-slate-600">
                        支持缩放、平移、文本搜索和高亮，增强用户与文档的互动。
                    </p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4 text-3xl">
                        <i class="fas fa-bookmark"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">书签与缩略图导航</h3>
                    <p class="text-slate-600">
                        内置大纲和侧边栏缩略图，方便快速定位文档内容。
                    </p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4 text-3xl">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">可插拔架构</h3>
                    <p class="text-slate-600">
                        允许开发者扩展或替换UI组件，无需fork代码即可定制功能。
                    </p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4 text-3xl">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">TypeScript支持</h3>
                    <p class="text-slate-600">
                        提供完整的类型定义，确保开发过程中的类型安全和高效体验。
                    </p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-600 mb-4 text-3xl">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">响应式设计</h3>
                    <p class="text-slate-600">
                        完美适配各种屏幕尺寸，从桌面到移动设备提供一致体验。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-20 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">使用场景</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    EmbedPDF在多种场景中都能显著提升用户体验
                </p>
                <div class="divider"></div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-slate-50 p-8 rounded-xl">
                    <div class="bg-indigo-100 p-4 rounded-lg mb-6">
                        <i class="fas fa-graduation-cap text-indigo-600 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">在线文档平台</h3>
                    <p class="text-slate-600 mb-4">
                        教育平台需要展示课程相关的PDF教材。开发者可使用EmbedPDF在网页中嵌入教材，支持学生通过搜索功能查找关键词或使用书签跳转章节，提升学习效率。
                    </p>
                    <div class="bg-indigo-50 px-3 py-2 rounded-md inline-block">
                        <span class="text-sm font-medium text-indigo-700">教育科技</span>
                    </div>
                </div>
                
                <div class="bg-slate-50 p-8 rounded-xl">
                    <div class="bg-indigo-100 p-4 rounded-lg mb-6">
                        <i class="fas fa-building text-indigo-600 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">企业文档管理</h3>
                    <p class="text-slate-600 mb-4">
                        企业内部系统需展示合同或报告。EmbedPDF可嵌入React应用，提供缩放和注释功能，方便员工审阅和标记关键条款。
                    </p>
                    <div class="bg-indigo-50 px-3 py-2 rounded-md inline-block">
                        <span class="text-sm font-medium text-indigo-700">企业应用</span>
                    </div>
                </div>
                
                <div class="bg-slate-50 p-8 rounded-xl">
                    <div class="bg-indigo-100 p-4 rounded-lg mb-6">
                        <i class="fas fa-pencil-alt text-indigo-600 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">内容创作者网站</h3>
                    <p class="text-slate-600 mb-4">
                        博客作者希望分享PDF格式的电子书。EmbedPDF允许在Svelte网站中嵌入查看器，用户可直接在浏览器中阅读，无需下载。
                    </p>
                    <div class="bg-indigo-50 px-3 py-2 rounded-md inline-block">
                        <span class="text-sm font-medium text-indigo-700">内容平台</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="py-20 px-4 bg-slate-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">优势与特色</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    与其他PDF查看器相比，EmbedPDF的独特优势
                </p>
                <div class="divider"></div>
            </div>
            
            <div class="mermaid mb-12">
                graph TD
                    A[PDF查看器选择] --> B[EmbedPDF]
                    A --> C[PDF.js]
                    A --> D[Adobe PDF Embed API]
                    
                    B --> E[框架无关性]
                    B --> F[高性能WebAssembly]
                    B --> G[轻量级与模块化]
                    B --> H[丰富的交互功能]
                    B --> I[开源与社区驱动]
                    
                    C --> J[功能全面但复杂]
                    C --> K[纯JavaScript实现]
                    
                    D --> L[功能强大]
                    D --> M[价格昂贵]
                    D --> N[供应商锁定]
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-2xl font-bold mb-6 font-serif">EmbedPDF 优势</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="bg-indigo-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-code-branch text-indigo-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">框架无关性</h4>
                                <p class="text-slate-600">支持React、Vue、Svelte、Preact和原生JavaScript，无需特定框架绑定，适配性强。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-bolt text-indigo-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">高性能WebAssembly</h4>
                                <p class="text-slate-600">基于PDFium和WebAssembly，渲染速度快，准确性高，优于传统JavaScript解析器。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-weight-hanging text-indigo-600"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">轻量级与模块化</h4>
                                <p class="text-slate-600">核心体积小，支持树形抖动(tree-shaking)，仅加载所需功能，减少资源占用。</p>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold mb-6 font-serif">局限性</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-print text-red-500"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Firefox打印限制</h4>
                                <p class="text-slate-600">当前不支持Firefox的PDF打印功能，用户需下载文件并使用其他软件打印。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-font text-red-500"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">OCR功能缺失</h4>
                                <p class="text-slate-600">OCR(光学字符识别)功能尚未集成，需额外开发或借助其他工具。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-cog text-red-500"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">高级功能配置</h4>
                                <p class="text-slate-600">部分高级功能(如复杂注释)可能需要开发者手动配置，增加学习成本。</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section id="try-it" class="py-20 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">上手指南</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    快速开始使用EmbedPDF的详细步骤
                </p>
                <div class="divider"></div>
            </div>
            
            <div class="bg-slate-50 rounded-xl overflow-hidden">
                <div class="grid md:grid-cols-2">
                    <div class="p-8">
                        <h3 class="text-2xl font-bold mb-6 font-serif">安装与配置</h3>
                        
                        <div class="mb-8">
                            <h4 class="font-bold mb-3 flex items-center">
                                <span class="bg-indigo-100 text-indigo-800 text-sm font-mono px-3 py-1 rounded-full mr-3">1</span>
                                安装EmbedPDF
                            </h4>
                            <div class="code-block p-4 rounded-lg mb-3">
                                <code class="text-sm font-mono">npm install @embedpdf/viewer</code>
                            </div>
                            <p class="text-sm text-slate-600">或者使用CDN: <code class="bg-slate-200 px-2 py-1 rounded text-sm">https://cdn.jsdelivr.net/npm/@embedpdf/viewer@latest</code></p>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="font-bold mb-3 flex items-center">
                                <span class="bg-indigo-100 text-indigo-800 text-sm font-mono px-3 py-1 rounded-full mr-3">2</span>
                                准备HTML结构
                            </h4>
                            <div class="code-block p-4 rounded-lg">
                                <pre class="text-sm font-mono">&lt;div id="pdf-container"&gt;&lt;/div&gt;</pre>
                            </div>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="font-bold mb-3 flex items-center">
                                <span class="bg-indigo-100 text-indigo-800 text-sm font-mono px-3 py-1 rounded-full mr-3">3</span>
                                初始化查看器
                            </h4>
                            <div class="bg-indigo-50 p-4 rounded-lg">
                                <ul class="flex border-b border-indigo-100 mb-3">
                                    <li class="mr-2">
                                        <button class="tab-btn active px-4 py-2 text-sm font-medium text-indigo-600">React</button>
                                    </li>
                                    <li class="mr-2">
                                        <button class="tab-btn px-4 py-2 text-sm font-medium text-slate-600 hover:text-indigo-600">Vanilla JS</button>
                                    </li>
                                    <li>
                                        <button class="tab-btn px-4 py-2 text-sm font-medium text-slate-600 hover:text-indigo-600">Vue</button>
                                    </li>
                                </ul>
                                <div class="tab-content active">
                                    <div class="code-block p-4 rounded-lg">
                                        <pre class="text-sm font-mono">import { EmbedPDF } from '@embedpdf/viewer';
import React from 'react';

function App() {
  return (
    &lt;EmbedPDF
      document={{ url: 'path/to/your/pdf.pdf' }}
      options={{ zoom: 1, showSidebar: true }}
    /&gt;
  );
}
export default App;</pre>
                                    </div>
                                </div>
                                <div class="tab-content hidden">
                                    <div class="code-block p-4 rounded-lg">
                                        <pre class="text-sm font-mono">&lt;script type="module"&gt;
  import { EmbedPDF } from 'https://cdn.jsdelivr.net/npm/@embedpdf/viewer@latest';
  const viewer = new EmbedPDF({
    container: document.getElementById('pdf-container'),
    document: { url: 'path/to/your/pdf.pdf' },
    options: { zoom: 1, showSidebar: true }
  });
  viewer.render();
&lt;/script&gt;</pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-indigo-600 p-8 text-white">
                        <h3 class="text-2xl font-bold mb-6 font-serif">最佳实践</h3>
                        
                        <div class="mb-8">
                            <h4 class="font-bold mb-3 flex items-center">
                                <span class="bg-white text-indigo-600 text-sm font-mono px-3 py-1 rounded-full mr-3">1</span>
                                托管PDF文件
                            </h4>
                            <p class="mb-3">确保PDF文件可通过URL访问：</p>
                            <ul class="space-y-2 mb-4">
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle mt-1 mr-2 text-indigo-200"></i>
                                    <span>上传至GitHub仓库获取公开URL</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle mt-1 mr-2 text-indigo-200"></i>
                                    <span>使用AWS S3或其他云存储服务</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle mt-1 mr-2 text-indigo-200"></i>
                                    <span>本地开发可使用相对路径</span>
                                </li>
                            </ul>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="font-bold mb-3 flex items-center">
                                <span class="bg-white text-indigo-600 text-sm font-mono px-3 py-1 rounded-full mr-3">2</span>
                                自定义功能
                            </h4>
                            <p class="mb-2">根据文档调整选项：</p>
                            <div class="bg-indigo-700 p-3 rounded-lg mb-3">
                                <pre class="text-sm font-mono text-indigo-100">options: {
  showAnnotations: true,
  customPlugins: [...]
}</pre>
                            </div>
                            <p>访问 <a href="https://www.embedpdf.com" class="underline hover:text-white">官方文档</a> 获取更多配置选项。</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold mb-3 flex items-center">
                                <span class="bg-white text-indigo-600 text-sm font-mono px-3 py-1 rounded-full mr-3">3</span>
                                测试与调试
                            </h4>
                            <p class="mb-2">使用Playground测试不同PDF文件：</p>
                            <a href="https://snippet.embedpdf.com" target="_blank" class="inline-flex items-center bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition duration-300">
                                <i class="fas fa-external-link-alt mr-2"></i>
                                访问EmbedPDF Playground
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-indigo-50">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">开始使用EmbedPDF</h2>
            <p class="text-xl text-slate-700 mb-8 max-w-2xl mx-auto">
                为您的项目添加专业级的PDF查看功能，完全免费且开源
            </p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <a href="https://github.com/embedpdf/embed-pdf-viewer" target="_blank" class="bg-indigo-600 text-white px-8 py-4 rounded-lg font-medium hover:bg-indigo-700 transition duration-300 shadow-lg flex items-center justify-center">
                    <i class="fab fa-github mr-3 text-xl"></i>
                    GitHub仓库
                </a>
                <a href="https://www.embedpdf.com" target="_blank" class="bg-white text-indigo-600 border-2 border-indigo-600 px-8 py-4 rounded-lg font-medium hover:bg-indigo-50 transition duration-300 flex items-center justify-center">
                    <i class="fas fa-book mr-3 text-xl"></i>
                    官方文档
                </a>
            </div>
        </div>
    </section>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Tab functionality
        document.addEventListener('DOMContentLoaded', function() {
            const tabBtns = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabBtns.forEach((btn, index) => {
                btn.addEventListener('click', () => {
                    // Remove active class from all buttons and contents
                    tabBtns.forEach(b => b.classList.remove('active'));
                    tabContents.forEach(c => c.classList.remove('active'));
                    tabContents.forEach(c => c.classList.add('hidden'));
                    
                    // Add active class to clicked button
                    btn.classList.add('active');
                    
                    // Show corresponding content
                    tabContents[index].classList.add('active');
                    tabContents[index].classList.remove('hidden');
                });
            });
        });
    </script>
</body>
</html>
```